<template>
    <div class="container">
        <div class="success-page">
            <div class="success-icon"></div>
            <span class="success-title">领取成功</span>
            <p class="success-description">
                淘气值<span style="color: red; font-size: 20px">突破{{ num }}</span
                >, 解锁88VIP惊喜价
            </p>
            <button
                class="confirm-button"
                @click="confirm">
                确认完成
            </button>
        </div>
        <div class="success_bg"></div>
    </div>
</template>
<script>
export default {
    name: 'Success',
    data() {
        return {
            num: 1000,
        };
    },
    mounted() {},
    methods: {
        confirm() {
            console.log('confirm', '确认完成！');
            this.$router.push('/codePhone');
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    .success-page {
        height: 360px;
        margin: 5.5rem 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url('@/assets/images/index/card.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        .success-icon {
            /* 在此处添加您的图标样式，如使用背景图片或Font Awesome图标 */
            width: 8rem;
            height: 8rem;
            background-image: url('@/assets/images/index/success.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .success-title {
            font-size: 26px;
            color: #333; /* 可自定义标题颜色 */
            margin-bottom: 10px;
            font-weight: 600;
        }
    }
    //  font-size: larger 字体放大 字号放大
    .success_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('@/assets/images/index/success_bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    background-color: #f5f5f5; /* 可自定义背景色 */
}

.success-description {
    font-size: 18px;
    color: #666; /* 可自定义描述文字颜色 */
    text-align: center;
    margin-top: 0;
}

.confirm-button {
    padding: 10px 20px;
    border: 1px solid #bbb;
    background-color: #fff; /* 可自定义按钮颜色 */
    color: rgb(255, 92, 32);
    width: 200px;
    height: 56px;
    border-radius: 36px;
    font-size: 1.3rem;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease-in-out;
    z-index: 99;
}

.confirm-button:hover {
    background-color: #0069d9; /* 可自定义按钮悬停颜色 */
}
</style>
